<template>
  <!--模板-->
  <h1>测试 Model</h1>
  person：{{ person }}<br><br>
  fooToRef：{{ fooToRef }}<br><br>
  <el-button type="" @click="updateName">修改</el-button><br>
  <el-button type="" @click="set2">整体赋值</el-button><br>
  <el-button type="" @click="reset">重置</el-button><br>
</template>


<script setup lang="ts" generic="T extends {name: string}">
  import { reactive, toRefs } from 'vue'
  import { useModel } from '../../../lib/main'
  
  type Person = {
    name: string,
    age: number
  }

  
  console.time('Model工厂 实例化用时')
  const person = useModel(() => {
    return {
      name: '初始值：Model',
      age:20
    }
  })
  console.timeEnd('Model工厂 实例化用时')
  

  console.log('person：看看结构：', person)
  console.log('person：看看keys：', Object.keys(person))

  // 获取原型
  const foo = person.$toRaw()
  console.log('看看原型：', foo)

  const fooToRef = toRefs(person)
  console.log('看看toRefs：', fooToRef)

  const updateName = () => {
    person.name = 'aaa单独修改属性：' +  new Date().valueOf().toString()
  }

  
  const reset = () => {
    person.$reset()
  }

  
  const set2 = () => {
    person.$state = {
      name: 'state 赋值aaa',
      age: 30
    }
   
  }


</script>